import {Navigate,useRoutes} from "react-router-dom"
import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/NotFound'
import Home from '../components/Main/Home'
import About from '../components/Main/About'


const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>
            },
            {
                path:'/main/about',
                element:<About/>
            }
        ]
    },{
        path:'/',
        element:<Navigate to='/login' />
    },{
        path:'*',
        element:<NotFound/>
    },
]
export default routes

// hooks可以在函数式组件的最外层使用，当变量名为大写，就会识别为函数式组件，这样在APP中就直接使用这个MyRoutes组件就会生成路由结构了（因为识别到函数式组件时，会自动调用这个函数）
export const MyRoutes=()=>{

   return useRoutes(routes)
}
//在自定义hooks中可以使用hooks（前面有use就会被识别为自定义hooks）
export const useMyRoute =()=>{
    return useRoutes(routes)
}